<template>
  <div class="square-content">
    <div class="filter-container">
      <el-input v-model="listQuery.uid" placeholder="用户ID"></el-input>

      <el-select v-model="listQuery.auditState" clearable>
        <el-option
          v-for="item in deleteStateOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>

      <el-date-picker
        v-model="daterangeValue"
        type="datetimerange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="起始时间"
        end-placeholder="结束时间"
        value-format="yyyy-MM-dd HH:mm:ss"
        @change="daterangeChanged"
        :default-time="['00:00:00', '23:59:59']"
        :picker-options="daterangePickerOptions"
      ></el-date-picker>

      <el-button type="primary" @click="handleFilter">查询</el-button>
      <el-button type="warning" @click="resetFilter">重置</el-button>
    </div>

    <div class="app-container calendar-list-container">
      <div>
        <el-checkbox
          v-model="checkedAll"
          style="margin-right:10px;"
          @change="handleAllCheck"
          >全选</el-checkbox
        >
        <!--<el-button type="warning" @click="bitchRecommend">批量推荐</el-button>-->
        <el-button type="danger" @click="bitchCheck">批量通过</el-button>
        <el-button type="danger" @click="bitchDelete">批量删除</el-button>
<!--        <el-button type="danger" @click="bitchRecover">批量恢复</el-button>-->
      </div>

      <div class="rec-li" v-for="item in list" :key="item.id">
        <div class="rec-li-head">
          <el-checkbox
            v-model="item.checked"
            @change="handleCheckedBoxChange(item, $event)"
          ></el-checkbox>
          {{ item.create_time }}
          <span style="color:red">id:{{ item.drift_id }}</span>
          <span>标签：{{ item.label_name }}</span>
          <span>得分：{{ item.audit_score }}</span>

          <div class="button-group">
            <span class="operator" v-if="item.operator"
              >最后操作人：{{ item.operator }}</span
            >
            <el-button
              type="primary"
              size="small"
              @click="handleUpdateItem([item], '1')"
              v-if="item.audit_state == 0"
            >通过</el-button
            >
            <el-button
              type="danger"
              size="small"
              @click="handleUpdateItem([item], '2')"
              v-if="item.audit_state != 2"
              >删除</el-button
            >
            <el-button
              type="warning"
              size="small"
              @click="handleUpdateItem([item], '3')"
              v-if="item.audit_state == 2"
              >恢复</el-button
            >
            <template>
              <el-button
                type="danger"
                size="small"
                @click="banPlayer(item.uid)"
                v-if="item.uid != 0 && item.forbidden_state == 2"
                >封号</el-button
              >
              <el-button size="small" disabled v-if="item.forbidden_state == 1"
                >已封号</el-button
              >
            </template>
          </div>
        </div>
        <div class="rec-li-body">
          <div class="rec-li-body-left">
            <div class="user">
              <div class="username">
                <span class="name uid-click" @click="$UserInfoPopUp.install(item.uid)">内部ID:{{ item.uid }}</span>
                <span class="name">昵称:{{ item.user_name }}</span>
                <span class="name"
                  >性别:{{ item.user_sex == "0" ? "女" : "男" }}</span
                >
                <span v-if="item.uid != 0" color="red"
                  >被删帖数量：{{ item.deleted_num }}</span
                >
              </div>
            </div>
          </div>
          <div class="rec-li-body-right">
            <div class="article-content">​​{{ item.text_content }}</div>
            <template v-if="item.voice_url">
              <audio
                :src="item.voice_url | filterUrl"
                controls="controls"
              ></audio>
            </template>
          </div>
        </div>
      </div>
    </div>

    <TablePagination
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
      :current-page="listQuery.page"
      :limit="listQuery.limit"
      :total="total"
      :loading="listLoading"
    >
    </TablePagination>

    <!--封号-->
    <BanPlayerDialog
      :visible.sync="banPlayerDialogVisible"
      :forbiddenType="0"
      @handleClose="closeBanPlayerDiolog"
      @handleSuccess="getList"
      :uids="banPlayerId"
    ></BanPlayerDialog>
  </div>
</template>

<script>
import DATEPICKER_OPTIONS from "@/config/datepickerOptions";
import { parseTime } from "@/filters/index";
import BanPlayerDialog from "@/components/BanPlayerDialog";
import TablePagination from "@/components/TablePagination";
import VPlayer from "@/components/VPlayer/index";
import ModalDynamic from "./components/ModalDynamic";

export default {
  name: "square-content",
  components: { VPlayer, BanPlayerDialog, ModalDynamic, TablePagination },
  data() {
    return {
      banPlayerDialogVisible: false,
      list: null,
      total: null,
      listLoading: true,
      listQuery: {
        auditState: "0",
        offset: 0,
        limit: 20,
        startTime: null,
        endTime: null,
        orderBy: "update_time",
        orderType: "desc",
        present_id: ""
      },
      defaultQueryParams: {
        auditState: "0"
      },
      daterangePickerOptions: DATEPICKER_OPTIONS.daterangePickerOptions,
      daterangeValue: "",
      operationInfo: {},
      topicOptions: [],
      inputVisible: false,
      inputValue: "",
      checkedAll: false,
      dialogFormVisible: false,
      dialogImgSrc: "",
      activeName: "first",
      banPlayerId: "",
      deleteStateOptions: [
        {
          label: "待处理",
          value: "0"
        },
        {
          label: "已通过",
          value: "1"
        },
        {
          label: "已删除",
          value: "2"
        },
        // {
        //   label: "已恢复",
        //   value: "3"
        // },
        // {
        //   label: "内容可疑",
        //   value: "4"
        // }
      ],
      currentTrendId: ""
    };
  },
  created() {
    this.getList();
  },
  filters: {
    filterUrl(str) {
      return "https://p.qumitech.com/" + str.split("_DURATION")[0];
    }
  },
  methods: {
    getList() {
      this.checkedAll = false;
      this.listLoading = true;
      this.$get("admin/drift", this.listQuery).then(resp => {
        this.list = resp.data.drift_bottle_list;
        this.total = resp.data.count;
        this.listLoading = false;
        this.list.forEach(item => {
          item.checked = false;
        });
      });
    },

    handleCheckedBoxChange(item, $event) {
      item.checked = $event;
      let index = this.list.findIndex(element => {
        return (item.drift_id = element.drift_id);
      });
      this.list.splice(index, 1, item);
      this.checkedAll = this.list.every((item, index, array) => {
        return item.checked === true;
      });
    },
    handleAllCheck(value) {
      this.list.forEach((item, index, arr) => {
        if (value) {
          item.checked = true;
        } else {
          item.checked = false;
        }
      });
    },
    //更新数据状态
    handleUpdateItem(rows, audit_state) {
      let ids = rows.map(item => {
        return item.drift_id;
      });
      let urls = rows.reduce((accumulator, item) => {
        if (item.voice_url) {
          return accumulator.concat(item.voice_url);
        }
      }, []);
      let title = "";
      if (audit_state == "2") {
        title = "确定删除该动态吗？";
      } else if (audit_state == "3") {
        title = "确定恢复该动态吗？";
      } else if (audit_state == "1") {
        title = "确定审核通过该动态吗？";
      }
      this.$alert(title, "提示", {
        confirmButtonText: "确定",
        callback: action => {
          if (action == "confirm") {
            this.$put("admin/drift", {
              drift_id: ids,
              resource_url: urls,
              audit_state: audit_state //0:待处理 1:已处理 2:已删除 3:已恢复',
            }).then(resp => {
              if (resp.status === 200) {
                this.getList();
                this.$message({
                  message: "操作成功",
                  type: "success"
                });
              } else {
                this.$message({
                  message: resp.msg,
                  type: "error"
                });
              }
            });
          }
        }
      });
    },
    getCheckedRows() {
      let checkedRows = [];
      this.list.forEach((item, index, arr) => {
        if (item.checked) {
          checkedRows.push(item);
        }
      });
      return checkedRows;
    },
    //批量恢复
    bitchRecover() {
      let checkedRows = this.getCheckedRows();
      if (!checkedRows.length) {
        this.$message.warning("请选择一条数据");
        return;
      }
      this.handleUpdateItem(checkedRows, "3");
    },
    //批量删除
    bitchDelete() {
      let checkedRows = this.getCheckedRows();
      if (!checkedRows.length) {
        this.$message.warning("请选择一条数据");
        return;
      }
      this.handleUpdateItem(checkedRows, "2");
    },
    //批量审核
    bitchCheck() {
      let checkedRows = this.getCheckedRows();
      if (!checkedRows.length) {
        this.$message.warning("请选择一条数据");
        return;
      }
      this.handleUpdateItem(checkedRows, "1");
    },
    //封号
    banPlayer(uid) {
      this.banPlayerId = [uid];
      this.banPlayerDialogVisible = true;
    },
    closeBanPlayerDiolog() {
      this.banPlayerDialogVisible = false;
    }
  }
};
</script>

<style lang="scss">
@import "../../styles/voice-bottle";
</style>
